<template>
  <vxe-form
      ref="form"
      title-align="right"
      title-width="120"
      :data="$attrs.formData"
      :rules="$attrs.formRules">
    <vxe-form-item v-for="(item, index) in $attrs.components" :title="item.label" :field="item.prop"
                   :span="item.span" :key="index">
      <template v-slot="scope">
        <validation-observer>
          <validation-provider v-slot="{ errors,changed,classes }">
            <slot v-if="item.slot" :name="item.prop" :row="$attrs.formData" :changed="changed"></slot>
            <components v-else
                        :is="item.componentName"
                        v-model.trim="$attrs.formData[item.value]"
                        :placeholder="item.placeholder"
                        :clearable="item.hasOwnProperty(item.clearable) ? item.clearable : true"
                        @input="$refs.form.updateStatus(scope)"
                        @change="$refs.form.updateStatus(scope)"
                        @uploadSuccess="uploadSuccess"
                        :type="item.type"
                        :rows="item.rows"
                        :autosize="item.autosize"
                        :DictTypeCode="item.DictTypeCode"
                        :dictTypeCode="item.dictTypeCode"
                        :selectTitle="item.selectTitle"
                        :maxlength="item.maxLength"
                        class
                        :class="changed ? 'inputClass' : '{}'"
                        v-bind="item.attrs"
                        v-on="item.on"
            />
          </validation-provider>
        </validation-observer>
      </template>
    </vxe-form-item>
  </vxe-form>
</template>

<script>
  import {ValidationObserver, ValidationProvider} from 'vee-validate'
  import SelectDeparament from "./SelectDeparament";
  import SelectDiction from "./SelectDiction";

  export default {
    name: "dymForm",
    components: {
      ValidationObserver,
      ValidationProvider,
      SelectDeparament,
      SelectDiction
    },
    methods: {
      uploadSuccess (...val) {
        this.$emit('uploadSuccess', val)
      }
    }
  }
</script>

<style scoped>
</style>
